{% extends 'base.html' %}
{% load static %}

{% block title %}设置新密码 - 自动化测试平台{% endblock %}

{% block extra_css %}
<style>
    .form-container {
        max-width: 500px;
        margin: 0 auto;
        background: var(--card-bg);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        padding: 2rem;
    }
    
    .form-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        display: block;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background-color: var(--card-bg);
        color: var(--text-primary);
        font-size: 1rem;
        transition: border-color var(--transition-fast);
        box-sizing: border-box;
    }
    
    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    }
    
    .help-text {
        display: block;
        color: var(--text-tertiary);
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .button-group {
        margin-top: 2rem;
    }
    
    .btn-primary {
        background-color: var(--primary);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 500;
        cursor: pointer;
        transition: background-color var(--transition-fast);
        width: 100%;
    }
    
    .btn-primary:hover {
        background-color: var(--primary-hover);
    }
    
    .error-message {
        color: var(--danger);
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .form-error {
        border-color: var(--danger);
    }
    
    .form-error:focus {
        border-color: var(--danger);
        box-shadow: 0 0 0 3px rgba(245, 34, 45, 0.1);
    }
    
    .alert-danger {
        background-color: var(--danger-light);
        border: 1px solid var(--danger/20);
        color: var(--danger);
        padding: 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 1.5rem;
    }
    
    .alert-danger h3 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-size: 1.125rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="form-container">
    {% if validlink %}
        <h2 class="form-title">设置新密码</h2>
        
        {% if form.errors %}
            <div class="bg-danger/10 border border-danger/20 text-danger p-3 rounded-lg mb-4">
                <strong>设置密码失败，请检查以下错误：</strong>
                <ul class="mt-2">
                    {% for field, errors in form.errors.items %}
                        {% for error in errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
        
        <form method="post">
            {% csrf_token %}
            
            <div class="form-group">
                <label for="id_new_password1" class="form-label">新密码</label>
                <input 
                    type="password" 
                    id="id_new_password1" 
                    name="new_password1" 
                    class="form-control {% if form.new_password1.errors %}form-error{% endif %}"
                    required
                >
                {% if form.new_password1.errors %}
                    <div class="error-message">
                        {% for error in form.new_password1.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="help-text">
                        <p>密码必须满足以下要求：</p>
                        <ul style="margin: 0.5rem 0 0 1rem; padding-left: 0;">
                            <li>不能与您的个人信息过于相似</li>
                            <li>至少包含8个字符</li>
                            <li>不能是常见的密码</li>
                            <li>不能全是数字</li>
                        </ul>
                    </div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="id_new_password2" class="form-label">确认新密码</label>
                <input 
                    type="password" 
                    id="id_new_password2" 
                    name="new_password2" 
                    class="form-control {% if form.new_password2.errors %}form-error{% endif %}"
                    required
                >
                {% if form.new_password2.errors %}
                    <div class="error-message">
                        {% for error in form.new_password2.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="help-text">请再次输入新密码进行确认</div>
                {% endif %}
            </div>
            
            <div class="button-group">
                <button type="submit" class="btn-primary">重置密码</button>
            </div>
        </form>
    {% else %}
        <div class="alert-danger">
            <h3>无效的重置链接</h3>
            <p>此密码重置链接已过期或无效。可能是因为：</p>
            <ul>
                <li>链接已被使用过</li>
                <li>链接已过期（通常在24小时后）</li>
                <li>链接被错误复制或损坏</li>
            </ul>
            <p>请<a href="{% url 'accounts:password_reset' %}" style="color: var(--danger); text-decoration: underline;">重新请求重置密码</a>。</p>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 密码可见性切换功能（仅在有效链接页面显示时）
        if (document.querySelector('.form-title')) {
            const passwordFields = ['id_new_password1', 'id_new_password2'];
            
            passwordFields.forEach(fieldId => {
                const field = document.getElementById(fieldId);
                if (field) {
                    const wrapper = document.createElement('div');
                    wrapper.style.position = 'relative';
                    wrapper.style.width = '100%';
                    
                    // 保存原来的父元素和下一个兄弟元素
                    const parent = field.parentNode;
                    const nextSibling = field.nextSibling;
                    
                    // 移动输入框到包装器
                    parent.insertBefore(wrapper, field);
                    wrapper.appendChild(field);
                    
                    // 创建切换按钮
                    const toggleBtn = document.createElement('button');
                    toggleBtn.type = 'button';
                    toggleBtn.className = 'toggle-password';
                    toggleBtn.style.position = 'absolute';
                    toggleBtn.style.right = '8px';
                    toggleBtn.style.top = '50%';
                    toggleBtn.style.transform = 'translateY(-50%)';
                    toggleBtn.style.background = 'none';
                    toggleBtn.style.border = 'none';
                    toggleBtn.style.cursor = 'pointer';
                    toggleBtn.style.color = 'var(--text-tertiary)';
                    toggleBtn.style.padding = '4px';
                    toggleBtn.innerHTML = '<i class="far fa-eye"></i>';
                    
                    wrapper.appendChild(toggleBtn);
                    
                    // 添加点击事件
                    toggleBtn.addEventListener('click', function() {
                        const type = field.getAttribute('type') === 'password' ? 'text' : 'password';
                        field.setAttribute('type', type);
                        
                        // 切换图标
                        toggleBtn.innerHTML = type === 'password' ? '<i class="far fa-eye"></i>' : '<i class="far fa-eye-slash"></i>';
                    });
                }
            });
        }
    });
</script>
{% endblock %}